<template>
  <div>
    <el-dialog title="请选择模板" :append-to-body="true" @close="closeDio" :visible="dialogTableVisible" width="1500px" style="padding:20px">
      <ul class="cate_product module_box" v-loading="loading">
        <li v-for="(item, index) in cj_data" :key="index" @click="add_cj(item)" class="module_item">
          <div>
            <img :src="$fnc.getImgUrl(item.piclink)" alt="" />
          </div>
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "xz_module",
  props: {
    show: {
      type: Boolean,
      default: true
    },
    showType: {
      type: String,
      default: "table"
    }
  },
  data () {
    return {
      dialogTableVisible: this.show,
      cj_data: [],
      loading: false
    };
  },
  created () {
    this.get_module();
  },
  methods: {
    closeDio () {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
    add_cj (row) {
      row.url_title = "模板";
      this.$emit("sendShop", row);
      this.closeDio();
    },
    get_module () {
      this.$api.getPage.getIndexLists({}).then(res => {
        if (res.data.code == 200) {
          this.cj_data = res.data.result;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    }
  },
  watch: {
    show (val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.get_module();
      this.dialogTableVisible = val1;
    },
    dialogTableVisible (val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    }
  }
};
</script>

<style lang="less" scoped>
.cate_product {
  display: flex;
  flex-wrap: wrap;
  > li {
    // width: 250px;
    // height: 30px;
    line-height: 30px;
    cursor: pointer;
  }
  li:hover {
    color: red;
  }
}
.module_box {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.module_item {
  // width: 100%;
  width: 200px;
  margin-right: 15px;
  display: flex;
  flex-flow: column;

  justify-content: flex-start;
  align-items: center;
  > div {
    width: 200px;
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    border: 1px solid #f8f8f8;
    img {
      width: 100%;
      height: auto;
      max-height: none;
    }
  }
  > p {
    font-size: 16px;
    line-height: 32px;
  }
}
</style>
